<template>
  <div class="popup-container-root">
    <div class="popup-header flex-row">
      <div class="txt-container">
        <img src="@/assets/images/map/main-public-title-ico.png">

        <span class="text-color-gradient">{{ title }}</span>
      </div>
      <div class="close-bt" @click="closePopup">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="popup-content">
      <div class="txt-item flex-row" v-for="(item,index) in filedList" :key="index">
        <div class="label-item flex-row">
          {{ item.label }}
        </div>
        <div class="value-item flex-row">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    filedList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    closePopup() {
      this.$emit('closePopup')
    }
  }
}
</script>

<style lang="scss" scoped>
.popup-container-root {
  height: max-content;
  width: 350px;

  .popup-header {
    //设置内容位置
    justify-content: space-between;
    align-items: center;
    //设置背景色
    background: linear-gradient(to right,rgba(42, 92, 255, 0.4), rgba(4, 211, 255, 0.8), rgba(5, 26, 93, 0.8));

    //设置头部左侧容器样式
    .txt-container {
      //设置宽高
      width: 60%;
      height: 100%;
      display: flex;
      align-items: center;
      //设置图片
      img {
        height: 25px;
        width: 20px;
        margin-left: 3px;
        margin-right: 5px;
      }
      //设置标题文本样式
      span {
        font-weight: bold;

      }
    }

    .close-bt {
      margin-right: 5px;
      cursor: pointer;
    }
  }

  .popup-content {
    height: max-content;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background: rgba(3, 30, 59, 0.8);

    .txt-item {
      width: 100%;
      height: 30px;

      /* 奇数行 */
      &:nth-child(odd) {
        background: transparent;
      }

      /* 偶数行 */
      &:nth-child(even) {
        background: rgba(255, 255, 255, .1);
      }


      .label-item, .value-item {
        box-sizing: border-box;
        padding: 0 5px;
        color: #FFFFFF;
        width: 50%;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>
